<template>
    <div class="flex justify-center">
        <div class="flex flex-col mt-[200px]">
            <div index="0" class="ml-4 !mr-auto text-3xl">
                <div class="flex items-center">
                    <img
                        :src="logo"
                        alt="logo"
                        class="w-[100px] h-[100px] inline-block mt-1 mr-2"
                    />
                    教学案例演示系统
                </div>
            </div>
            <div class="flex mt-16 items-center">
                <div class="w-[100px]">用户名：</div>
                <el-input type="text" v-model="username" />
            </div>
            <div class="flex mt-8 items-center">
                <div class="w-[100px]">密码：</div>
                <el-input type="password" v-model="password" />
            </div>
            <div class="flex mt-8 justify-center">
                <el-button type="primary" @click="handleLogin">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import logo from '@/assets/logo.svg'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '@/apis/login'

const router = useRouter()

const userStore = useUserStore()

const username = ref('')
const password = ref('')

onMounted(() => {
    if (userStore.logined) {
        router.push('/')
    }
})
const handleLogin = async () => {
    if (!username.value || !password.value) {
        ElMessage.error('请输入用户名或密码')
        return
    }
    const res = await login(username.value, password.value)
    if (res.success) {
        userStore.login(res.data)
        router.push('/')
        ElMessage.success('登录成功')
    }
}
</script>

<style scoped></style>
